<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container" style="margin-top: 7px;">
      <el-form
        :model="equipmentProfitForm"
        status-icon
        ref="equipmentProfitForm"
        label-width="100px"
        class="demo-ruleForm"
        :inline="true"
        style="display:block"
      >
        <!-- :rules="rules" -->
        <el-form-item label="充电桩编号" prop="equipmentNumber" style="display:inline-block">
          <el-input
            @keyup.enter.native="this.getEquipmentEarningsList()"
            type="text"
            v-model="equipmentProfitForm.equipmentNumber"
            autocomplete="off"
            placeholder="请输入充电桩编号"
            class="searchBox filter-item"
            style="width: 200px;"
          ></el-input>
        </el-form-item>

        <el-form-item prop="province" label="所在城市" style="display:inline-block">
          <el-select
            clearable
            v-model="equipmentProfitForm.province"
            placeholder="省"
            class="filter-item searchBox"
            @change="getCities2(1)"
          >
            <el-option v-for="p in provices" :label="p.NAME" :value="p.AREA_ID" :key="p.AREA_ID" />
          </el-select>
        </el-form-item>

        <el-form-item prop="city" style="display:inline-block">
          <el-select
            clearable
            v-model="equipmentProfitForm.city"
            placeholder="市"
            class="filter-item searchBox"
            @change="getAreas2(1)"
          >
            <el-option v-for="c in cities" :label="c.NAME" :value="c.AREA_ID" :key="c.AREA_ID" />
          </el-select>
        </el-form-item>

        <el-form-item prop="area" style="display:inline-block">
          <el-select
            clearable
            v-model="equipmentProfitForm.area"
            placeholder="区"
            class="filter-item searchBox"
            @change="getAreas3(1)"
          >
            <el-option v-for="c in areas" :label="c.NAME" :value="c.AREA_ID" :key="c.AREA_ID" />
          </el-select>
        </el-form-item>

        <el-form-item prop="startTime" label="时间段" style="display:inline-block">
           <!-- 2022.09.07  合并为时间日期选择器 -->
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:00"
        @change="getDateTime"
      >
      </el-date-picker>
          <!-- <el-date-picker
            v-model="equipmentProfitForm.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="searchBox"
            style="width: 200px;"
            placeholder="选择开始日期"
          ></el-date-picker> -->
        </el-form-item>

        <!-- <el-form-item prop="endTime" style="display:inline-block">
          <el-date-picker
            v-model="equipmentProfitForm.endTime"
            type="datetime"
            class="searchBox"
            style="width: 200px;"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束日期"
          ></el-date-picker>
        </el-form-item> -->
        <br />
        <el-form-item prop="payType" label="支付类型" style="display:inline-block">
          <el-select
            clearable
            v-model="equipmentProfitForm.payType"
            placeholder="选择支付类型"
            class="filter-item searchBox"
          >
            <el-option v-for="c in options" :label="c.label" :value="c.value" :key="c.id" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getEquipmentEarningsList()">查询</el-button>
          <el-button @click="resetForm('ruleForm')">重置搜索条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- table 表格 -->
    <!-- <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" prop="index" align="center" />
      <el-table-column label="昵称" prop="nickName" align="center" />
      <el-table-column label="手机号" prop="userPhone" align="center" />
      <el-table-column label="ic卡号" prop="cardNo" align="center" />
      <el-table-column label="支付流水号" prop="outTradeNo" align="center" width="150px" />
      <el-table-column label="总金额(元)" prop="balanceInfo" align="center" />
      <el-table-column label="金额(元)" prop="expensesAmountInfo" align="center" />
      <el-table-column label="增送金额(元)" prop="givenAmountInfo" align="center" />
      <el-table-column label="财务类型" prop="financeTypeInfo" align="center" />
      <el-table-column label="支付方式" prop="payTypeInfo" align="center" />
      <el-table-column label="创建时间" prop="ctime" align="center" />
    </el-table>-->
    <!-- pagination 分页 -->
    <!-- <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>-->

    <VeHistogram
      :data="chartData"
      :settings="chartSettings"
       :extend="extend"
      style="width:100%;height:600px"
    ></VeHistogram>

    <!--   :extend="extend" -->
  </div>
</template>

<script>
// 地址解析
import {
  getAddressByAreaId,
  getId,
  getAddress,
  getObjByName,
  getObjByAreaId,
  getByNameProvinceId,
  getByNameCityId,
  getByNameAreaId,
  findOneByAreaId,
} from "@/utils/getAddress";
import tableMixins from "@/mixins/table";
import VeHistogram from "v-charts/lib/histogram";

import "velocity-animate/velocity.ui.js";
// import BarChart from "./conmponents/BarChart";
import { getEquipmentEarningsList } from "@/api/financial";
// import { parseTime, getdTime } from "@/utils";

export default {
  mixins: [tableMixins],
  name: "financial_equipmentFinance",
  components: { VeHistogram },
  data() {
    this.extend = {
      series: {
        label: { show: true, position: "top" },
      },
    };
    this.chartSettings = {
      metrics: ["余额消费(元)", "IC卡消费(元)", "总消费(元)"],
      dimension: ["充电桩编号"],
    };

    return {
      dateTime:"",
      // 查询条件
      equipmentProfitForm: {
        equipmentNumber: "",
        province: "",
        city: "",
        area: "",
        payType: "",
        startTime: "",
        endTime: "",
      },
      // 省市区
      provices: [],
      cities: [],
      areas: [],
      pId: "",
      cId: "",
      options: [
        {
          value: "3",
          label: "余额支付",
          id: 3,
        },
        {
          value: "5",
          label: "IC卡支付",
          id: 5,
        },
      ],

      // 柱状图数据
      chartData: {
        columns: [],
        rows: [],
      },

      option: {},
      total: 0,
      listQuery: {
        offset: 1,
        limit: 10,
        provices: "",
        city: "",
        area: "",
        outTradeNo: "",
        nickName: "",
        userPhone: "",
        financeType: "",
        payType: "",
        startTime: "",
        endTime: "",
      },
      loading: {
        list: false,
        download: false,
      },
      downloadLoading: false,
    };
  },
  methods: {
    getDateTime(value) {
      if (value) {
        this.equipmentProfitForm.startTime = value[0];
        this.equipmentProfitForm.endTime = value[1];
      } else {
        this.equipmentProfitForm.startTime = "";
        this.equipmentProfitForm.endTime = "";
      }
    },


    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    //

    // 查询设备收益列表
    async getEquipmentEarningsList() {
      // console.log(this.equipmentProfitForm);
      this.chartData = {
        columns: [],
        rows: [],
      };
      try {
        const { data } = await getEquipmentEarningsList({
          ...this.equipmentProfitForm,
        });

        var wxProfit;
        var icProfit;
        this.chartData.columns = [
          "充电桩编号",
          "余额消费(元)",
          "IC卡消费(元)",
          "总消费(元)",
        ];
        if(data.length>0){
        for (var i = 0; i < data.length; i++) {
          icProfit = 0;
          wxProfit = 0;
          if (data[i].list.length > 0) {
            let list = data[i].list;
            for (var j = 0; j < list.length; j++) {
              if (data[i].list[j].payType == 3) {
                wxProfit =
                  (data[i].list[j].orderAmount +
                    data[i].list[j].orderRefundGivenAmount -
                    data[i].list[j].orderRefundAmount) /
                  100;
              }else if (data[i].list[j].payType == 5) {
                icProfit =
                  (data[i].list[j].orderAmount +
                    data[i].list[j].orderRefundGivenAmount -
                    data[i].list[j].orderRefundAmount) /
                  100;
              }
            }
          }

          this.chartData.rows[i] = {
            充电桩编号: data[i].equipmentNumber,
            '余额消费(元)': wxProfit.toFixed(2),
            'IC卡消费(元)': icProfit.toFixed(2),
            '总消费(元)': wxProfit + icProfit,
          };
        }
     }
        // console.log(this.chartData);
      } catch (err) {
        // console.log(err);
      }
    },
    // 重置搜索条件
    resetForm(flag) {
      this.$refs.bindForm && this.$refs.bindForm.resetFields();
      if (flag) {
        this.equipmentProfitForm = {
          equipmentNumber: "",
          province: "",
          city: "",
          area: "",
          payType: "",
          startTime: "",
          endTime: "",
        };
      }
    },

    formatDate(date, offset) {
      if (date && typeof date == "object") {
        const d = date[offset];
        return new Date(d).getTime();
      }
      return "";
    },
    //

    //根据fid 查询省、市、区  fid = 0 查询所有省；查询市或者地区 fid 传对应的省areaID
    getAddressByAreaId(fid) {
      return getAddressByAreaId(fid);
    },
    // 获取对应市
    getCities2(type) {
      // console.log(type);
      if (type) {
        this.equipmentProfitForm.city = "";
        this.equipmentProfitForm.area = "";
      }
      this.pId = this.equipmentProfitForm.province;
      this.equipmentProfitForm.province = getAddress(this.pId);

      this.cities = getAddressByAreaId(this.pId);
    },
    // 获取对应的地区
    getAreas2(type) {
      if (type) {
        this.equipmentProfitForm.area = "";
      }
      this.pId = this.equipmentProfitForm.city;
      this.equipmentProfitForm.city = getAddress(this.pId);
      this.areas = getAddressByAreaId(this.pId);
    },
    getAreas3(type) {
      this.pId = this.equipmentProfitForm.area;
      this.equipmentProfitForm.area = getAddress(this.pId);
    },
    // 获取对应的地区
    getAreas() {
      this.equipmentProfitForm.area = "";
      this.areas = getAddressByAreaId(this.cId);
    },
    // 获取对应市Id
    getCities() {
      this.equipmentProfitForm.area = "";
      this.areas = [];
      this.cities = getAddressByAreaId(this.pId);
    },
  },

  created() {
    // this.getList()
    (this.provices = getAddressByAreaId(0)), this.getCities();
    this.getAreas();
    this.getEquipmentEarningsList();
  },
  beforeMount() {},
};
</script>
<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0px;
}
.Bot-bt {
  margin-bottom: 8px;
}
.searchBox {
  width: 150px;
  margin-right: 15px;
}
</style>
